<!-- 采集素材 -->
<template>
	<view class="material-center-page">
		<view class="directory-cls">
			<view>默认文件夹 ></view>
			<view class="color_999999 font-size_24rpx">共15个文件</view>
		</view>
		<view class="height130"></view>
		<!-- 文件data -->
		<block v-for="(i, j) in 7" :key="j">
			<view class="display-a file-cls">
				<image src="/static/cloud/video.png"></image>
				<view class="sunui-flex-column">
					<view class="sunui-flex-align-center file-name-cls"><text>通用图片素材</text></view>
					<view class="color_999999 font-size_24rpx">3个 | 2023/10/31 16:00</view>
				</view>
			</view>
		</block>
		<view class="height130"></view>
		<view class="fixed-bottom-btn">
			<view class="flex-column btn-cls">
				<image src="/static/cloud/delFile.png"></image>
				<view>删除视频</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		goTo() {}
	}
};
</script>

<style lang="less">
page {
	background-color: #fff;
}
.material-center-page {
	.directory-cls {
		position: fixed;
		top:0;
		z-index: 999;
		background-color: #fff;
		padding: 40rpx 34rpx 0;
		height: 130rpx;
		width: 100%;
	}
	// 文件夹cls
	.file-cls {
		padding: 30rpx 34rpx;
		image {
			width: 104rpx;
			height: 104rpx;
			margin-right: 20rpx;
		}
		.file-name-cls {
			text {
				font-size: 32rpx;
			}
			view {
				margin-left: 12rpx;
				width: 68rpx;
				height: 34rpx;
				border-radius: 8rpx;
				border: 2rpx solid #1e6ceb;
				background: #fff;
				color: #1e6ceb;
				font-size: 24rpx;
			}
		}
	}
	.height130 {
		height: 130rpx;
	}
	// 底部按钮cls
	.fixed-bottom-btn {
		background-color: #fff;
		z-index: 999;
		border-top: 2rpx solid #ededed;
		display: flex;
		align-items: center;
		width: 100%;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		.btn-cls {
			// width: calc(100% / 2);
			width: 100%;
			image {
				width: 52rpx;
				height: 52rpx;
				margin-bottom: 12rpx;
			}
			view {
				font-size: 24rpx;
			}
		}
	}
}
</style>
